作品一：大屏可视化（驾驶舱）
在线体验
一、定位与价值
| 视角 | 说明 |
|---|---|
| 业务 | 经营 / 设备 / 能耗等指标 一屏统览，辅助值班与决策 |
| 交互 | 图表 + WebSocket 推送，接近实时刷新 |
| 交付 | ToG / ToB 常见形态：分辨率适配（1080p～4K）、长时间无人值守展示 |
对应仓库目录：projects/dashboard（前端 Monorepo + NestJS API）。
二、技术架构（分层）
text
浏览器（Vue 3 + ECharts）
↓ HTTPS / WS
Nginx（/api-dashboard/、/socket.io/）
↓
NestJS（大屏 API + Socket.IO）
↓
MySQL / Redis（依业务配置）- REST：图表初始化、筛选条件、导出等。
- 长连接：Socket.IO，路径需与 Nginx
location、前端 client path 一致，避免代理断裂。
三、技术栈（摘录）
| 层级 | 技术 |
|---|---|
| 前端 | Vue 3、TypeScript、Vite、ECharts、大屏自适应布局 |
| 后端 | NestJS、JWT、业务模块与网关前缀 api-dashboard |
| 实时 | socket.io-client ↔ @nestjs/platform-socket.io |
| 部署 | Docker Compose；静态 dist 由 Nginx 挂载 /dashboard/ |
四、工程难点与对策（摘要）
| 难点 | 对策思路 |
|---|---|
| 大屏分辨率不一 | rem/vw + 设计基准稿；图表 resize 监听 |
| WS 断线 | 心跳、退避重连、鉴权过期刷新 Token |
| 首屏资源体积 | 路由懒加载、按需引入 ECharts 组件 |
| 静态资源缓存 | 构建带 hash；网关侧 强缓存 与 HTML 协商缓存 分离 |